<template>
	<view class="p30">
		<view class="flex mb40">
			<u-avatar v-if="data.avatar" :src="data.avatar||''" size="92"></u-avatar>
			<view class="flex1 als-s flex-col row-around ml20">
				<view class="fs30 fw-600">{{data.name}}</view>
				<view class="color-999 fs24">手机号：{{data.mobile}}</view>
				<view class="color-999 fs24" v-if="data.regcode" @click="$tool.copy(data.regcode)">邀请码：{{data.regcode}}
				</view>
			</view>
			<view class="tc" @click="$jump('/pages/my/menu/invite')">
				<image src="/static/img/icon/qrcode.png" class="w36 h36" mode=""></image>
				<view class="fs24">推广码</view>
			</view>
		</view>
		<view class="p20 radius16 flex row-around w-max color-fff tc fs32 bg-zs">
			<view class="">
				<view class="">总收益</view>
				<view class="mt8">{{data.total_income||0}}</view>
			</view>
			<view class="">
				<view class="">直推收益</view>
				<view class="mt8">{{data.direct_income||0}}</view>
			</view>
			<view class="">
				<view class="">间推收益</view>
				<view class="mt8">{{data.indirect_income||0}}</view>
			</view>
		</view>

		<view class="h20"></view>
		<!--  -->
		<view class="p30 radius20 box-shadow" v-if="data.is_show">
			<view class="fs30 fw-w">我的推荐人</view>
			<view class="flex mt30" v-if="data.tui">
				<u-avatar :src="data.tui.avatar||''" size="112"></u-avatar>
				<view class="flex1 als-s flex-col row-around ml20">
					<view class="fs30 fw-600">{{data.tui.name}}</view>
					<view class="color-999 fs24">ID：{{data.tui.id}}</view>
					<view class="color-999 fs24">手机号：{{data.tui.mobile}}</view>
				</view>
				<!-- <view class="">{{data.create_time}}</view> -->
			</view>
			<view class="" v-else>
				<view class="flex pt20 pb20">
					<u-input border height="76" v-model="mobile" maxlength="11" placeholder="请输入推荐人手机号"></u-input>
					<view class="w20"></view>
					<u-button type="warning" @click="bindMember()">绑定推荐人</u-button>
				</view>
				<view class="fs20 color-999">{{data.info}}</view>
			</view>
		</view>
		<view class="h20"></view>
		<view class="fw-w fs34 mb16">推荐列表
			<text class="color-666 fs26">({{data.total_num}}人)</text>
		</view>
		<!-- <u-search placeholder="会员昵称或手机号" v-model="keywords" :showAction="false" /> -->
		<view class="h20"></view>
		<u-subsection :list="tabs" :current="current" @change="current=$event,getList()" height="80">
		</u-subsection>
		<view class="w-max">
			<u-empty mode="list" v-if="!list.length" marginTop="100"></u-empty>
			<view class="p20 radius20 mt20 box-shadow" v-for="(item,index) in list" :key="index">
				<view class="flex ">
					<u-avatar :src="item.avatar||''" size="80"></u-avatar>
					<view class="flex1 als-s flex-col row-around ml20">
						<view class="fs30 fw-600">{{item.name}}</view>
						<view class="color-999 fs24">{{item.mobile}}</view>
					</view>
					<view class="color-666">{{item.create_time}}</view>
				</view>
				<view class="flex row-between mt20">
					<view class="">下单次数：{{item.order_num}}</view>
					<view class="">已到账：{{item.order_income}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {


				current: 0,
				data: '',

				list: '',

				page: 1,
				keywords: '',
				mobile: '',

			};
		},
		computed: {
			tabs() {
				return [{
					name: '直推成员(' + (this.data.direct_num || 0) + '人)',
					type: '1'
				}, {
					name: '间推人员(' + (this.data.indirect_num || 0) + '人)',
					type: '2'
				}]
			}
		},
		watch: {
			keywords() {
				this.$u.debounce(this.getList, 500)
			}
		},
		onLoad() {
			this.getData()
			this.getList()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			bindMember() {
				this.$request('/member/team/bindMember', {
					mobile: this.mobile
				}).then(res => {
					this.$msg(res.msg)
					this.getData()
				})
			},
			submit() {
				if (!this.checked) return this.$msg('请勾选协议')
				this.$request('/member/team/applyPromoter', this.form).then(res => {
					// this.show = false
					this.$msg(res.msg)
					this.getData()
				})
			},
			getQrcode() {
				if (this.qrcode) return this.qrcodeShow = true
				this.$request('/member/team/getQrcode').then(res => {
					this.qrcode = res.data
					this.qrcodeShow = true
				})
			},
			getData() {
				this.$request('/member/team/teamInfo').then(res => {
					let data = res.data || ''
					for (let key in this.form) {
						this.form[key] = data[key]
					}
					this.data = data || ''
					if (data.status == 1) {
						this.show = false
					} else {
						this.show = true
					}
				})
			},
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				this.$request('/member/team/teamList', {
					page: this.page,
					type: this.tabs[this.current]?.type,
					keywords: this.keywords,
				}).then(res => {
					this.team = res.data
					let list = res.data?.data || ''
					list.forEach((item, index) => {
						item.open = index ? false : true
					})
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.box-shadow {
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	}
</style>